<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>codefun</title>
    <link rel="stylesheet" href="../../css/index.css">
    <link rel="stylesheet" href="dashboard0.css" />
    <script type="text/javascript" src=""></script>
    <script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
</head>
<body>
<div class="flex-col page">
    <div class="flex-row flex-auto group_6">
        <div class="flex-col flex-auto self-start group_7">
            <div class="self-start group_8">
                <span class="font_5 text_8">See your data visualization from</span>
                <span class="text_9">27 Feb - 3 Apr</span>
            </div>
            <div class="flex-row equal-division">
                <div id="line1" class="flex-col equal-division-item section_6 space-y-22">

                </div>
                <div id="line2" class="flex-col equal-division-item_2 section_7 space-y-22">

                </div>
                <div id="line3" class="flex-col equal-division-item_2 section_8 space-y-22">

                </div>
                <div id="line4" class="flex-col equal-division-item_3 section_9 space-y-22">

                </div>
            </div>
            <div class="flex-row group_17 space-x-25">
                <div class="flex-col flex-auto relative section_10">
                    <div class="flex-row justify-between">
                        <div class="flex-col items-start group_19 space-y-12">
                            <span class="font_10 text_15">Tony</span>
                            <span class="font_5 text_19">理发师服务次数</span>
                        </div>

                    </div>

                    <div class="flex-col group_27">

                        <div class="flex-row items-end space-x-10">

                            <div class="flex-row flex-auto relative group_28">
                                <div id="cycle1" class="section_16 pos_4"></div>
                                <div style="margin-left: 23rem;width: 45rem" id="line5" class="section_16 pos_4"></div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="flex-col shrink-0 input space-y-24">
                    <div class="flex-col section_11 space-y-27">
                        <div class="flex-col section_17">
                            <div style="height: 12rem;width: 100%" id="container" class="flex-row items-end group_32 space-x-28">

                            </div>
                        </div>
                        <div class="flex-row group_20 space-x-50">
                            <span class="font_11 text_16">店内营销目标</span>
<!--                            <span class="self-start font_6 text_17">67%</span>-->
                        </div>
                        <div class="flex-col space-y-23">
                            <div class="flex-col justify-start items-start self-center section_15">
                                <div class="shrink-0 section_14"></div>
                            </div>
                            <div class="flex-col group_23 space-y-10">
                                <div class="flex-row items-center group_25 space-x-66">
                                    <span class="font_1 text_24">Target</span>
                                    <span class="font_1">now</span>
                                </div>
<!--                                目标数字-->
                                <div class="flex-row group_26 space-x-58">
<!--                                    <span class="font_11">$4000</span>-->
<!--                                    <span class="font_11">$3200</span>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var line1 = {
        dataZoom: {
            type:'inside',
        },
        toolbox:{
            show:true,
            feature:{
                dataZoom: {yAxisIndex:'none'}
            }
        },
        title:{
            text:'成交量'
        },
        tooltip:{
            trigger:'axis'
        },
        xAxis:{
            type: 'category',
            data: ['12','13','14','15']
        },
        yAxis:{
            type:'value'
        },
        series: [{
            data:[12,16,10,18],
            type:'line',
            smooth:true
        }]
    };
    var Line1 = echarts.init(document.getElementById('line1'));
    Line1.setOption(line1);

    var line2 = {
        dataZoom:{
            type:'inside'
        },
        toolbox:{
            show:true,
            feature: {
                dataZoom:{yAxisIndex: 'none'}
            }
        },
        title: {
            text: '成交额'
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: {
            type:'category',
            data:['12','13','14','15']
        },
        yAxis: {
            type:'value'
        },
        series:  [{
            data:[820, 932, 901, 934],
            type:'line'
        }]
    };
    var Line2 = echarts.init(document.getElementById('line2'));
    Line2.setOption(line2);

    var line3 = {
        title:{
            text:'订单数量'
        },
        dataZoom:{
            type:'inside'
        },
        toolbox:{
            show:true,
            feature:{
                dataZoom:{yAxisIndex:'none'}
            }
        },
        tooltip:{
            trigger:'axis',
        },
        xAxis:{
            type:'category',
            data:['12','13','14','15']
        },
        yAxis:{
            type:'value'
        },
        series:[{
            data:[12,16,10,18],
            type:'line'
        }]
    };
    var Line3 = echarts.init(document.getElementById('line3'));
    Line3.setOption(line3)

    var line4 = {
        title:{
            text:'到店人数'
        },
        dataZoom:{
            type:'inside'
        },
        toolbox:{
            show:true,
            feature:{
                dataZoom:{yAxisIndex:'none'}
            }
        },
        tooltip:{
            trigger:'axis',
        },
        xAxis:{
            type:'category',
            data:['12','13','14','15'],
            name:'日期'
        },
        yAxis:{
            type:'value'
        },
        series:[{
            data:[30,21,25,34],
            type:'line'
        }]
    };
    var Line4 = echarts.init(document.getElementById('line4'));
    Line4.setOption(line4)

    var cycle1 = {
        legend: {
            top: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [0, 250],
                radius:'80%',
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 4
                },
                data: [
                    { value: 40, name: '理发师袁某' },
                    { value: 38, name: '理发师袁文某' },
                    { value: 32, name: '理发师袁文哲' },
                    { value: 30, name: '业绩垃圾的洗头师某某俊' },
                ]
            }
        ]
    };
    var Cycle1 = echarts.init(document.getElementById('cycle1'));
    Cycle1.setOption(cycle1)

    var line5 = {
        visualMap: [
            {
                show: false,
                type: 'continuous',
                seriesIndex: 0,
                min: 0,
                max: 400
            },
            {
                show: false,
                type: 'continuous',
                seriesIndex: 1,
                dimension: 0,
                min: 0,

            }
        ],
        dataZoom: {
            type:'inside',//slider
            //orient:'horizontal'//vertical
        },
        toolbox: {
            show: true,
            feature: {
                dataZoom: {yAxisIndex:'none'}
            }
        },
        title: {
            text: '月'
        },
        tooltip: {
            trigger: 'axis',
            show:true
        },
        xAxis: {
            type: 'category',
            data: ['Jan','Fer','Mar','Apr','May','Jue','Juy','Aug','Sep','Oct','Nov','Dec']
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [106,110,145,167,124,156,109,178,145,198,156,187],
            type: 'line',
            showSymbol:false
        }]
    };

    var Line5 = echarts.init(document.getElementById('line5'));
    Line5.setOption(line5)

    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
    });
    var app = {};

    var option;

    option = {
        series: [
            {
                name: 'hour',
                type: 'gauge',
                startAngle: 90,
                endAngle: -270,
                min: 0,
                max: 12,
                splitNumber: 4,
                clockwise: true,
                radius:'100%',
                axisLine: {
                    lineStyle: {
                        width: 3,
                        color: [[1, 'rgba(0,0,0,0.7)']],
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                        shadowBlur: 15
                    }
                },
                splitLine: {
                    lineStyle: {
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 3,
                        shadowOffsetX: 1,
                        shadowOffsetY: 2
                    }
                },
                axisLabel: {
                    fontSize: 20,
                    distance: 10,
                    formatter: function (value) {
                        if (value === 0) {
                            return '';
                        }
                        return value + '';
                    }
                },
                anchor: {
                    show: true,
                    icon: 'path://M532.8,70.8C532.8,70.8,532.8,70.8,532.8,70.8L532.8,70.8C532.7,70.8,532.8,70.8,532.8,70.8z M456.1,49.6c-2.2-6.2-8.1-10.6-15-10.6h-37.5v10.6h37.5l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3v0h-22.5c-1.5,0.1-3,0.4-4.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.8c-0.6,1.7-0.9,3.4-0.9,5.3v16h10.6v-16l0,0l0,0c0-2.7,2.1-5,4.7-5.3h10.3l10.4,21.2h11.8l-10.4-21.2h0c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3C457,53,456.7,51.2,456.1,49.6z M388.9,92.1h11.3L381,39h-3.6h-11.3L346.8,92v0h11.3l3.9-10.7h7.3h7.7l3.9-10.6h-7.7h-7.3l7.7-21.2v0L388.9,92.1z M301,38.9h-10.6v53.1H301V70.8h28.4l3.7-10.6H301V38.9zM333.2,38.9v10.6v10.7v31.9h10.6V38.9H333.2z M249.5,81.4L249.5,81.4L249.5,81.4c-2.9,0-5.3-2.4-5.3-5.3h0V54.9h0l0,0c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.9-10.6h-37.5c-1.9,0-3.6,0.3-5.3,0.9c-4.5,1.6-8.1,5.2-9.7,9.7c-0.6,1.7-0.9,3.5-0.9,5.3l0,0v21.3c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.5,0.9,5.3,0.9h33.6l3.9-10.6H249.5z M176.8,38.9v10.6h49.6l3.9-10.6H176.8z M192.7,81.4L192.7,81.4L192.7,81.4c-2.9,0-5.3-2.4-5.3-5.3l0,0v-5.3h38.9l3.9-10.6h-53.4v10.6v5.3l0,0c0,1.9,0.3,3.6,0.9,5.3c1.6,4.5,5.2,8.1,9.7,9.7c1.7,0.6,3.4,0.9,5.3,0.9h23.4h10.2l3.9-10.6l0,0H192.7z M460.1,38.9v10.6h21.4v42.5h10.6V49.6h17.5l3.8-10.6H460.1z M541.6,68.2c-0.2,0.1-0.4,0.3-0.7,0.4C541.1,68.4,541.4,68.3,541.6,68.2L541.6,68.2z M554.3,60.2h-21.6v0l0,0c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3l0,0l0,0h33.6l3.8-10.6h-37.5l0,0c-6.9,0-12.8,4.4-15,10.6c-0.6,1.7-0.9,3.5-0.9,5.3c0,1.9,0.3,3.7,0.9,5.3c2.2,6.2,8.1,10.6,15,10.6h21.6l0,0c2.9,0,5.3,2.4,5.3,5.3c0,2.9-2.4,5.3-5.3,5.3l0,0h-37.5v10.6h37.5c6.9,0,12.8-4.4,15-10.6c0.6-1.7,0.9-3.5,0.9-5.3c0-1.9-0.3-3.7-0.9-5.3C567.2,64.6,561.3,60.2,554.3,60.2z',
                    showAbove: false,
                    offsetCenter: [0, '-150%'],
                    size: 111,
                    keepAspect: true,
                    itemStyle: {
                        color: '#707177'
                    }
                },
                pointer: {
                    icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                    width: 5,
                    length: '80%',
                    offsetCenter: [0, '8%'],
                    itemStyle: {
                        color: '#C0911F',
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 8,
                        shadowOffsetX: 2,
                        shadowOffsetY: 4
                    }
                },
                detail: {
                    show: false
                },
                title: {
                    offsetCenter: [0, '30%']
                },
                data: [
                    {
                        value: 0
                    }
                ]
            },
            {
                name: 'minute',
                type: 'gauge',
                startAngle: 90,
                endAngle: -270,
                min: 0,
                max: 60,
                clockwise: true,
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                pointer: {
                    icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                    width: 4,
                    length: '80%',
                    offsetCenter: [0, '8%'],
                    itemStyle: {
                        color: '#C0911F',
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 8,
                        shadowOffsetX: 2,
                        shadowOffsetY: 4
                    }
                },
                anchor: {
                    show: true,
                    size: 1,
                    showAbove: false,
                    itemStyle: {
                        borderWidth: 15,
                        borderColor: '#C0911F',
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 8,
                        shadowOffsetX: 2,
                        shadowOffsetY: 4
                    }
                },
                detail: {
                    show: false
                },
                title: {
                    offsetCenter: ['0%', '-40%']
                },
                data: [
                    {
                        value: 0
                    }
                ]
            },
            {
                name: 'second',
                type: 'gauge',
                startAngle: 90,
                endAngle: -270,
                min: 0,
                max: 60,
                animationEasingUpdate: 'bounceOut',
                clockwise: true,
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                pointer: {
                    icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                    width: 2,
                    length: '100%',
                    offsetCenter: [0, '8%'],
                    itemStyle: {
                        color: '#C0911F',
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 8,
                        shadowOffsetX: 2,
                        shadowOffsetY: 4
                    }
                },
                anchor: {
                    show: true,
                    size: 1,
                    showAbove: true,
                    itemStyle: {
                        color: '#C0911F',
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 8,
                        shadowOffsetX: 2,
                        shadowOffsetY: 4
                    }
                },
                detail: {
                    show: false
                },
                title: {
                    offsetCenter: ['0%', '-40%']
                },
                data: [
                    {
                        value: 0
                    }
                ]
            }
        ]
    };
    setInterval(function () {
        var date = new Date();
        var second = date.getSeconds();
        var minute = date.getMinutes() + second / 60;
        var hour = (date.getHours() % 12) + minute / 60;
        option.animationDurationUpdate = 300;
        myChart.setOption({
            series: [
                {
                    name: 'hour',
                    animation: hour !== 0,
                    data: [{ value: hour }]
                },
                {
                    name: 'minute',
                    animation: minute !== 0,
                    data: [{ value: minute }]
                },
                {
                    animation: second !== 0,
                    name: 'second',
                    data: [{ value: second }]
                }
            ]
        });
    }, 1000);

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
</script>
</html>